<script setup lang='ts'>
defineOptions({ name: 'AppSportsPageFav' })

const { sportsFavoriteData } = storeToRefs(useSportsStore())

const list = computed(() => {
  if (sportsFavoriteData.value && sportsFavoriteData.value.d && sportsFavoriteData.value.d.length > 0)
    return sportsFavoriteData.value.d
  return []
})
</script>

<template>
  <div>
    <div class="text-[24px] font-semibold mb-[16px] text-[var(--color-text-white-0)] flex items-center leading-[32px]">
      <BaseIcon style="--tg-base-icon-color:#FFBE3E;" name="spt-fav" class="text-[32px] mr-[8px]" />
      {{ $t('sports_title_favourites') }}
    </div>
    <div>
      <AppSportsPageFavEmpty v-if="list.length === 0" />
      <div v-else class="grid gap-[16px]">
        <div class="min-w-0" v-for="event in list" :key="event.ei">
          <AppSportsMarketInfo :data="event" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped></style>
